<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>创建问卷</span>
      </div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="封面">
          <ws-upload-single-img v-model="form['pic_list']" :path="form['pic_list_url']"/>
          <div class="remark">*注:为保证显示效果,请上传一张210px*210px的图片,支持.png, .jpg, .gif格式</div>
        </el-form-item>
        <el-form-item label="问卷标题">
          <el-input v-model="form.goods_money"/>
        </el-form-item>
        <el-form-item label="问卷介绍">
          <el-input v-model="form.goods_money" :rows="3" type="textarea"/>
        </el-form-item>
        <el-form-item label="結束页">
          <ws-editor v-model="form['content']"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" class="bg-green btn">发布</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAddQuestion">增加题目</el-button>
          <el-button type="info" @click="toAddQuestion">导入题目</el-button>
          <el-button type="warning" @click="toAddQuestion">导入模板下载</el-button>
        </el-form-item>
        <el-form-item v-for="(item,index) in form['question']" :key="index" :label="'题目'+(form['question'].length-index)" class="question">
          <el-input v-model="form['question']['title']" :rows="3" type="textarea" placeholder="请输入题目"/>
          <div>
            <el-radio-group v-model="item['type']">
              <el-radio :label="0">必填</el-radio>
              <el-radio :label="1">选填</el-radio>
            </el-radio-group>
          </div>
          <el-radio-group v-model="item['questionType']">
            <el-radio :label="0">问答题</el-radio>
            <el-radio :label="1">单选题</el-radio>
            <el-radio :label="2">多选题</el-radio>
          </el-radio-group>
          <div v-if="item['questionType']===0">
            <el-radio-group v-model="item['optionsType']">
              <el-radio :label="0">单行文本</el-radio>
              <el-radio :label="1">多行文本</el-radio>
            </el-radio-group>
          </div>
          <div v-if="item['questionType']!==0">
            <el-button type="danger" class="bg-green" size="small" icon="el-icon-plus" @click="toAddQuestionOptions(index)">添加选项</el-button>
            <el-input v-for="(option,optionsIdx) in item['options']" :key="optionsIdx" v-model="option['value']" placeholder="请输入选项内容">
              <template slot="append">
                <el-button type="danger" size="small" icon="el-icon-delete" @click="toDeleteQuestionOptions(index, optionsIdx)"/>
              </template>
            </el-input>
          </div>
          <div>
            <el-button type="danger" size="small" @click="toDeleteQuestion(index)">删除题目</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',

      dialogImageUrl: '',
      showImageDialog: false,

      usersList: [], // 系统用户列表
      goodsList: [], // 商品列表

      form: {
        question: [{
          title: '',
          type: 0,
          questionType: 0,
          optionsType: 0,
          options: [{
            value: '选项一'
          }]
        }]
      },
      formRules: {
        goods_name: [{ required: true, message: '请输入客户名', trigger: 'change' }]
      }
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id
  },
  methods: {
    /**
     *  增加题目
     *  接口:'user/all-list'
     */
    toAddQuestion() {
      this.form['question'].reverse()
      this.form['question'].push({
        title: '',
        type: 0,
        questionType: 0,
        optionsType: 0,
        options: [{ value: '' }]
      })
      this.form['question'].reverse()
    },

    toAddQuestionOptions(index) {
      this.form['question'][index]['options'].push({ value: '' })
    },

    toDeleteQuestionOptions(index, optionsIdx) {
      this.form['question'][index]['options'].splice(optionsIdx, 1)
    },

    toDeleteQuestion(index) {
      this.form['question'].splice(index, 1)
    },

    /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
    getUsersList() {
      const url = 'user/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.usersList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          data.sale_proof = data.pic_list
          const url = 'achievement/edit/' + this.id
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .el-form {
      max-width: 900px;

      .title {
        font-weight: 600;
      }

      .remark {
        font-size: 13px;
        color: $textGray;
      }
    }
  }

  .btn {
    width: 20%;
    min-width: 160px;
  }

  .temple-download{
    margin-top: 20px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
